import { Pressable, StyleSheet, View, Image, Text } from "react-native";
import { Button, NativeBaseProvider, HStack, Switch } from "native-base"
export default function MovieItemCell(props) {
    const { movie } = props
    return (
        <Pressable onPress={props.onPress}>
            <View style={styles.container}>
                <Image source={{ uri: movie?.movieImg }} style={styles.thumbnail} />
                <View style={styles.rightContainer}>
                    <Text style={styles.title}>{movie.title}</Text>
                    <Text style={styles.year}>{movie.year}</Text>
                    {movie.average !== '0' ? (
                        <View style={styles.horizontalView}>
                            <Text style={styles.titleTag}>评分:</Text>
                            <Text style={styles.score}>{movie.average}</Text>
                        </View>) : (
                        <View style={styles.horizontalView}>
                            <Text style={styles.titleTag}>暂无评分
                            </Text>
                        </View>)
                    }
                    <View style={styles.horizontalView}>
                        <Text style={styles.titleTag}>导演:</Text>
                        <Text style={styles.name}>{movie.direcotrs}</Text>
                    </View>
                    <View style={styles.horizontalView}>
                        <Text style={styles.titleTag}>主演:</Text>
                        <Text style={styles.name}>
                            {movie.casts.length > 13 ? movie.casts.slice(0, 13) + "..." : movie.casts}
                        </Text>
                    </View>
                    <View style={styles.horizontalView}>
                        <HStack alignItems="center" space={4}>
                            <Text>Bluetooth</Text>
                            <Switch size="sm" />
                        </HStack>
                    </View>
                </View>
            </View>
        </Pressable>
    )
}

const styles = StyleSheet.create({
    container: {
        flexDirection: "row",
        justifyContent: "center",
        backgroundColor: "#F5FCFF",
        padding: 10,
        borderBottomWidth: 1,
        borderColor: "#e0e0e0",
    },
    thumbnail: {
        width: 110,
        height: 150,
        backgroundColor: "#f0f0f0",
    },
    rightContainer: {
        flex: 1,
        paddingLeft: 10,
        paddingTop: 5,
        paddingBottom: 5,
    },
    title: {
        fontSize: 16,
        fontWeight: "bold",
        color: "#333333",
        textAlign: "left",
    },
    year: {
        textAlign: "left",
        color: "#777777",
        marginTop: 10,
    },
    horizontalView: {
        flexDirection: "row",
        marginTop: 10,
    },
    titleTag: {
        color: "#666666",
    },
    score: {
        color: "#ff8800",
        fontWeight: "bold",
    },
    name: {
        color: "#333333",
        flex: 1,
    },
});